<template>
	<view style="padding: 0 30rpx">
    <view class="car">
      <view class="car-left">
        <image class="car-left-top" src="https://mp-7bd569d5-2369-48a6-b477-e8c6b6ccf6ce.cdn.bspapp.com/cw19.png"></image>
        <image class="car-left-bottom" src="https://mp-7bd569d5-2369-48a6-b477-e8c6b6ccf6ce.cdn.bspapp.com/cw18.png"></image>
      </view>
      <view class="car-right">
        <image class="car-right-img" src="https://mp-7bd569d5-2369-48a6-b477-e8c6b6ccf6ce.cdn.bspapp.com/cw2.png"></image>
      </view>
    </view>
		<swiper class="swiper box" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item v-for="(item, index) in bannerImgs" :key="index" @tap="goCouponList(item.type)">
				<view style="position: relative;">
          <image class="box-img" :src="item.img_url"></image>
          <view class="view">去查看</view>
        </view>
			</swiper-item>
		</swiper>
  <view class="card">
      <view class="card-item" @tap="goCouponList(1)">
        <view class="card-item-1">智慧停车</view>
        <view class="card-item-2">优惠券包</view>
        <image class="card-item-3" src="https://mp-7bd569d5-2369-48a6-b477-e8c6b6ccf6ce.cdn.bspapp.com/cw3.png"></image>
        <image class="card-item-4" src="https://mp-7bd569d5-2369-48a6-b477-e8c6b6ccf6ce.cdn.bspapp.com/cw16.png"></image>
      </view>
      <view class="card-item" @tap="goCouponList(2)">
        <view class="card-item-1">加油卡</view>
        <view class="card-item-2">福利卡</view>
        <image class="card-item-3" src="https://mp-7bd569d5-2369-48a6-b477-e8c6b6ccf6ce.cdn.bspapp.com/cw4.png"></image>
        <image class="card-item-4" src="https://mp-7bd569d5-2369-48a6-b477-e8c6b6ccf6ce.cdn.bspapp.com/cw17.png"></image>
      </view>
    </view>
   <view class="notice" @tap="goNotice">
      <image class="notice-1" src="https://mp-7bd569d5-2369-48a6-b477-e8c6b6ccf6ce.cdn.bspapp.com/cw5.png"></image>
      <view class="notice-2">{{txtObj.msg}}</view>
      <view v-if="txtObj.status == 1" class="notice-3"></view>
      <image class="notice-4" src="https://mp-7bd569d5-2369-48a6-b477-e8c6b6ccf6ce.cdn.bspapp.com/cw20.png"></image>
    </view>
    <view class="block">
      <view class="block-item">
        <view class="block-item-1" @tap="goInfo">
          <view class="block-item-1-1">规则说明</view>
          <view class="block-item-1-2">商学院全新项目</view>
          <view class="block-item-1-3">去了解 ></view>
          <image class="block-img1" src="https://mp-7bd569d5-2369-48a6-b477-e8c6b6ccf6ce.cdn.bspapp.com/cw6.png"></image>
        </view>
        <view class="block-item-2" @tap="goXieyi('65332ea4213929cbcef0c1e4')" style="margin-top: 20rpx;">
          <view class="block-item-2-1">停车券包规则</view>
          <view class="block-item-2-2">查询汽车故障范围</view>
          <image class="block-img2" src="https://mp-7bd569d5-2369-48a6-b477-e8c6b6ccf6ce.cdn.bspapp.com/cw8.png"></image>
        </view>
      </view>
      <view class="block-item">
        <view class="block-item" >
          <view class="block-item-2" @tap="goXieyi('65332e738b0da4ca08e27875')" style="background: linear-gradient(124deg, #FFF2FF 5.05%, #C1ABFF 91.6%);
">
            <view class="block-item-2-1">充值加油卡包规则</view>
            <view class="block-item-2-2">车牌号所属省份</view>
            <image class="block-img3" src="https://mp-7bd569d5-2369-48a6-b477-e8c6b6ccf6ce.cdn.bspapp.com/cw7.png"></image>
          </view>
        </view>
        <view class="block-item-1" @tap="goHezuo" style="margin-top: 20rpx;background: linear-gradient(133deg, #ECF7FF 0%, #91C4FF 96.1%);
">
          <view class="block-item-1-1">合作加油站</view>
          <view class="block-item-1-2">当前网点查询</view>
          <view class="block-item-1-3" style="background: linear-gradient(135deg, #A1BAFF 25%, #1E78FF 75%);">去了解 ></view>
          <image class="block-img4" src="https://mp-7bd569d5-2369-48a6-b477-e8c6b6ccf6ce.cdn.bspapp.com/cw9.png"></image>
        </view>
      </view>
    </view>
    <view class="title">
      <view class="title-1"></view>  
      <view class="title-2">智慧停车系统设备</view>  
      <view class="title-3">//每日享受租凭收益</view>  
    </view>
    <swiper class="swiper box" :indicator-dots="indicatorDots" :autoplay="autoplay2"  next-margin='28px'  :interval="interval"
    	:duration="duration">
        <swiper-item v-for="(item, index) in couponList" :key="index" @tap="goSign(item)">
          <view class="coupon">
            <view class="coupon-left">
              <image class="coupon-left-img" src="https://mp-7bd569d5-2369-48a6-b477-e8c6b6ccf6ce.cdn.bspapp.com/c21.png"></image>
            </view>
            <view class="coupon-right">
              <view class="coupon-right-top">
                <view class="coupon-right-top-1">{{item.name}}</view>
                <view class="coupon-right-top-2">
                  <view class="coupon-right-top-2-txt" v-for="(ele, idx) in item.tag_name" :key="idx">{{ele}}</view>
                </view>
              </view>
              <view class="coupon-right-bottom">
                <view class="coupon-right-bottom-left">
                  <image class="coupon-right-bottom-left-1" src="https://mp-7bd569d5-2369-48a6-b477-e8c6b6ccf6ce.cdn.bspapp.com/cw11.png"></image>
                  <view class="coupon-right-bottom-left-2">
                    合同保障
                  </view>
                </view>
                <view class="coupon-right-bottom-right">去兑换</view>
              </view>
            </view>
          </view>
        </swiper-item>
    </swiper>
    <view class="title" style="margin-top: -50rpx">
      <view class="title-1"></view>  
      <view class="title-2">国福智慧生态</view>  
      <view class="title-3">//数字基建，让城市更美好！</view>  
    </view>
    <view class="img-box">
      <view class="img-box-1">智慧交通</view>
      <image class="img-box-2" src="https://mp-7bd569d5-2369-48a6-b477-e8c6b6ccf6ce.cdn.bspapp.com/cw22.png"></image>
    </view>
    <view class="img-box">
      <view class="img-box-1">智慧城市</view>
      <image class="img-box-2" src="https://mp-7bd569d5-2369-48a6-b477-e8c6b6ccf6ce.cdn.bspapp.com/cw23.png"></image>
    </view>
    <view class="img-box">
      <view class="img-box-1">智慧生态</view>
      <image class="img-box-2" src="https://mp-7bd569d5-2369-48a6-b477-e8c6b6ccf6ce.cdn.bspapp.com/cw24.png"></image>
    </view>
    <view class="footer">
      <image class="footer-logo" src="https://mp-7bd569d5-2369-48a6-b477-e8c6b6ccf6ce.cdn.bspapp.com/cw25.png"></image>
      <image class="footer-logo1" src="https://mp-7bd569d5-2369-48a6-b477-e8c6b6ccf6ce.cdn.bspapp.com/cw29.png"></image>
      <view class="footer-txt">
        <view class="footer-txt-1">
          <view class="footer-txt-1-item">智</view>
          <view class="footer-txt-1-item">｜</view>
          <view class="footer-txt-1-item">慧</view>
          <view class="footer-txt-1-item">｜</view>
          <view class="footer-txt-1-item">生</view>
          <view class="footer-txt-1-item">｜</view>
          <view class="footer-txt-1-item">活</view>
        </view>
        <view class="footer-txt-1">
          <view class="footer-txt-1-item">智</view>
          <view class="footer-txt-1-item">｜</view>
          <view class="footer-txt-1-item">慧</view>
          <view class="footer-txt-1-item">｜</view>
          <view class="footer-txt-1-item">财</view>
          <view class="footer-txt-1-item">｜</view>
          <view class="footer-txt-1-item">富</view>
        </view>
      </view>
      </view>
      <view class="footer-copyright">Copyright 2023湖北国福汽车销售有限公司版权所有</view>
      <view class="footer-copyright">鄂ICP备2023016003号-1X</view>
    </view>
	</view>
</template>

<script>
  import myfn from '../../common/function/myPubFunction.js'
	export default {
		data() {
			return {
				indicatorDots: false,
				autoplay: true,
        autoplay2: false,
				interval: 3000,
				duration: 1000,
				bannerImgs: [
          {
            img_url: 'https://mp-7bd569d5-2369-48a6-b477-e8c6b6ccf6ce.cdn.bspapp.com/cw1.png',
            type: 1
          },
        ],
        bannerImgs2: [
          {
            img_url: 'https://mp-7bd569d5-2369-48a6-b477-e8c6b6ccf6ce.cdn.bspapp.com/cw1.png'
          },
          {
            img_url: 'https://mp-7bd569d5-2369-48a6-b477-e8c6b6ccf6ce.cdn.bspapp.com/cw1.png'
          }
        ],
        couponList: [],
        userInfo: {},
        showPrivate1: false,
        showGoSign: false,
        txtObj: {
          msg: '暂无消息'
        },
			}
		},
		async onShareAppMessage(options) {
			if (options.from === "menu") {
				console.log(1111);
			}
			return {
				title: "城市车位：您的车位选择",
				path: "/pages/index/index",
				imageUrl: "https://mp-7bd569d5-2369-48a6-b477-e8c6b6ccf6ce.cdn.bspapp.com/2023/09/01/zhihuitingche.png",
			};
		},
    onPullDownRefresh() {
      this.getCoupon()
      setTimeout(function () {
        uni.stopPullDownRefresh();
      }, 1000);
    },
    onLoad(options){
      // 小程序二维码进来的
      if (options.scene) {
        let invite_code  = decodeURIComponent(options.scene);
        let str = invite_code.split('=')
        console.log(str, 'str-----')
        uni.setStorageSync("invite_code", str[1]);
      }
      if (options.invite_code) {
        uni.setStorageSync('invite_code', options.invite_code)
      }
      
      // #ifdef H5
      let search = location.search
      if (search) {
        let arr = search.split('=')
        if (arr[1]) {
           uni.setStorageSync('invite_code', arr[1])
        }
      }
      // #endif
    },
		onShow() {
			this.getBanner();
      this.getCoupon()
      if (vk.checkToken()) {
        vk.userCenter.getCurrentUserInfo({
          success: (data) => {
            // 成功后的逻辑
            vk.setVuex('$user.userInfo', data.userInfo)
            this.userInfo = vk.getVuex('$user.userInfo')
            this.getNoticeList()
          }
        });
      }
      console.log(vk.pubfn.getCommonTime(new Date()))
		},
		methods: {
      goHezuo() {
        uni.navigateTo({
          url: '/pages/hezuo/hezuo'
        })
      },
      goXieyi(id) {
        uni.navigateTo({
          url: '/pages/xieyi/xieyi?id=' + id
        })
      },
      goNotice() {
        if(this.userInfo._id) {
          uni.navigateTo({
            url: '/pages/notice/notice'
          })
        } else {
          uni.navigateTo({
            url: '/pages/login/login'
          })
        }
      },
      goInfo(){
        uni.navigateTo({
          url: '/pages/info/info'
        })
      },
      getNoticeList() {
        vk.callFunction({
          url: 'user/kh/messageList',
          title: '加载中...',
          data: {
            user_id: this.userInfo._id,
          },
          success: (res) => {
            if(res.rows.length> 0) {
              this.txtObj = res.rows[0]
            }
          }
        })
      },
      goCouponList(type) {
        uni.navigateTo({
          url: '/pages/coupon_list/coupon_list?type=' + type
        })
      },
      goSign(item) {
        /**
         * 解析日期对象属性
         * @param {Date || Number} date 需要转换的时间
         */
        let info = vk.pubfn.getDateInfo(new Date());
        console.log(info)
        if (info.hour == 1 && info.minute<31 || info.hour == 0 && info.minute>30) {
          vk.toast('系统维护时间00：30～1：30，请稍后再操作','none');
        } else {
          let stock = 0
          if(item.name.indexOf('市代') > -1){
            stock = 500
          }
          if(item.name.indexOf('区代') > -1){
            stock = 300
          }
          uni.navigateTo({
            url: '/pages/sign/sign?id=' + item._id +'&stock=' + stock
          })
        }
      },
      testClick(e) {
        console.log(e);
      },
      qian_num(str) {
        return myfn.qian_num(str)
      },
      getBanner() {},
      getCoupon() {
         let that = this
          vk.callFunction({
            url: 'user/pub/couponAllget',
            data: {
              type: 1
            },
            success: (res) => {
              let arr = res.rows
              let list = []
              if (arr.length > 0) {
                arr = arr.sort((a, b) => {
                  return b.stock - a.stock
                })
                arr.map(item => {
                  if (item.stock > 0 && item.name.indexOf('测试券包') == -1) {
                    list.push(item)
                  }
                  // test
                  // list.push(item)
                })
              }
              
              that.couponList = list
            }
          })
      }
  }
	};
</script>

<style lang="scss">
  .car {
    margin-top: 88rpx;
    display: flex;
    align-items: center;
    width: 100%;
    &-left {
      width: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      &-top {
        width: 250rpx;
        height: 48rpx;
      }
      &-bottom {
        width: 250rpx;
        height: 28rpx;
        margin-top: 20rpx;
      }
    }
    &-right {
      width: 50%;
      &-img {
        width: 356rpx;
        height: 200rpx;
        border-radius: 16rpx;
      }
    }
  }
  .view {
    position: absolute;
    left: 30rpx;
    bottom: 60rpx;
    background: linear-gradient(90deg, #0FF -4.67%, #0380C9 100%);
    width: 168rpx;
     height: 56rpx;
     line-height: 56rpx;
     border-radius: 32rpx;
     color: #FFF;
     text-align: center;
     font-family: ABeeZee;
     font-size: 26rpx;
     font-style: normal;
     font-weight: 400;
  }
.box-img {
  width: 690rpx;
  height: 300rpx;
  border-radius: 32rpx;;
}
.card {
  display: flex;
  justify-content: space-between;
  margin-top: 60rpx;
  &-item {
    width: 332rpx;
    height: 160rpx;
    border-radius: 32rpx;
    position: relative;
    &-1 {
      position: absolute;
      z-index: 2;
      left: 24rpx;
      top: 22rpx;
      color: #FFF;
      font-size: 32rpx;
      font-style: normal;
      font-weight: 400;
    }
    &-2 {
      position: absolute;
      z-index: 2;
      left: 24rpx;
      top: 82rpx;
      color: #FFF;
      font-size: 24rpx;
      font-style: normal;
      font-weight: 400;
      opacity: 0.65;
    }
    &-3 {
      position: absolute;
      z-index: 2;
      right: 0;
      top: -70rpx;
      width: 180rpx;
      height: 180rpx;
    }
    &-4 {
      position: absolute;
      z-index: 1;
      left: 0;
      top: 0;
      width: 332rpx;
      height: 160rpx;
      border-radius: 32rpx;
    }
  }
}
.block {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
  &-img1 {
    position: absolute;
    right: 0rpx;
    bottom: 0rpx;
    width: 128rpx;
    height: 128rpx;
  }
  &-img2 {
    position: absolute;
    right: 0rpx;
    bottom: 0rpx;
    width: 120rpx;
    height: 120rpx;
  }
  &-img3 {
    position: absolute;
    right: 0rpx;
    bottom: 0rpx;
    width: 100rpx;
    height: 100rpx;
  }
  &-img4 {
    position: absolute;
    right: 0rpx;
    bottom: 0rpx;
    width: 140rpx;
    height: 140rpx;
  }
  &-item {
    display: flex;
    flex-direction: column;
    &-1 {
      width: 330rpx;
      height: 230rpx;
      position: relative;
      display: flex;
      flex-direction: column;
      background: linear-gradient(133deg, #FFFDEB 0%, #FFC8A2 96.1%);
      border-radius: 32rpx;
      &-1 {
        color: #000;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        margin-left: 34rpx;
        margin-top: 24rpx;
      }
      &-2 {
        color: #000;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        opacity: 0.23;
        margin-left: 34rpx;
        margin-top: 10rpx;
      }
      &-3 {
        margin-left: 34rpx;
        margin-top: 24rpx;
        background: linear-gradient(135deg, #FFD9A1 25%, #FF6B1E 75%);
        width: 136rpx;
         height: 52rpx;
         line-height: 52rpx;
         border-radius: 32rpx;
         color: #FFF;
         text-align: center;
         font-size: 26rpx;
         font-style: normal;
         font-weight: 400;
      }
    }
    &-2 {
      width: 330rpx;
      height: 148rpx;
      display: flex;
      flex-direction: column;
      position: relative;
      background: linear-gradient(124deg, #D4FFFC 5.05%, #B5FFBA 91.6%);
      border-radius: 32rpx;
      &-1 {
        color: #000;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        margin-left: 22rpx;
        margin-top: 32rpx;
      }
      &-2 {
        color: #000;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        opacity: 0.23;
        margin-left: 22rpx;
        margin-top: 10rpx;
      }
    }
  }
}
.notice {
  margin-top: 30rpx;
  border-radius: 32rpx;
  width: 630rpx;
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  background-color: #fff;
  &-1 {
    width: 44rpx;
    height: 32rpx
  }
  &-2 {
    flex: 1;
    margin-left: 20rpx;
    color: #000;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    max-width: 500rpx;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  &-3 {
    width: 12rpx;
    height: 12rpx;
    background-color: #ff0e0e;
    border-radius: 50%;
  }
  &-4 {
    width: 6px;
    height: 10px;
  }
}
.title {
  margin: 30rpx 0;
  display: flex;
  align-items: center;
  &-1 {
    width: 12rpx;
    height: 26rpx;
    background-color: #3FA2F8;
  }
  &-2 {
    color: #000;
    font-size: 32rpx;
    font-style: normal;
    font-weight: 400;
     margin-left: 10rpx;
  }
  &-3 {
    color: #AEAEAE;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    margin-left: 10rpx;
  }
}
.coupon {
  display: flex;
  width: 600rpx;
  height: 200rpx;
  border-radius: 32rpx;
  background-color: #fff;
  padding: 10rpx;
  &-left {
    width: 200rpx;
    height: 200rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    &-img {
      width: 180rpx;
      height: 180rpx;
      border-radius: 16rpx;
    }
  }
  &-right {
    display: flex;
    flex-direction: column;
    height: 180rpx;
    justify-content: space-between;
    flex: 1;
    padding: 10rpx;
    margin-left: 10rpx;
    &-top {
      &-1 {
        color: #000;
        font-size: 28rpx;
        font-style: normal;
        font-weight: 400;
      }
      &-2 {
        display: flex;
        flex-wrap: wrap;
        &-txt {
          color: #AAABB5;
          text-align: center;
          font-size: 24rpx;
          font-style: normal;
          font-weight: 400;
          margin-right: 10rpx;
        }
      }
    }
    &-bottom {
      display: flex;
      justify-content: space-between;
      &-left {
        display: flex;
        align-items: center;
        &-1 {
          width: 28rpx;
          height: 28rpx;
          margin-right: 10rpx;
        }
        &-2 {
          color: #4C82F8;
          font-family: ABeeZee;
          font-size: 24rpx;
          font-style: normal;
          font-weight: 400;
        }
      }
      &-right {
        width: 140rpx;
        height: 60rpx;
        line-height: 60rpx;
        font-size: 28rpx;;
        text-align: center;
        background-color: #e8ecfb;
        border-radius: 16rpx;
        color: #3F60E6;
        margin-right: 20rpx;
      }
    }
  }
}
.img-box {
  position: relative;
  margin-top: 30rpx;
  &-2 {
    width: 690rpx;
    height: 252rpx;
  }
  &-1 {
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
    background: rgba(255,255,255,.4);
    border-radius: 4rpx;
    color: #fff;
    width: 236rpx;
    height:88rpx;
    line-height: 88rpx;
    text-align: center;
    font-size: 36rpx;
    font-style: normal;
    font-weight: 700;
  }
}
.footer {
  margin-top: 60rpx;
  display: flex;
  align-items: center;
  flex-direction: column;
  &-logo {
    width: 60rpx;
    height: 60rpx;
  }
  &-logo1 {
    width: 124rpx;
    height: 60rpx;
    margin: 20rpx;
  }
  &-logotxt {
    color: #BAC1D1;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
  }
  &-txt {
    display: flex;
    justify-content: space-between;
    width: 500rpx;
    &-1 {
      display: flex;
      &-item {
        color: #BAC1D1;
        text-align: center;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        margin: 0 5rpx;
      }
    }
  }
  &-copyright {
    color: #BAC1D1;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    margin: 20rpx 0;
  }
}
</style>
